<template>
  <view class="edit-wrapper">
    <view class="wrapper-scroll">
      <uni-forms class="cust-form" ref="form" :modelValue="form" :rules="rules" label-position="top">
        <view class="view-block">
          <uni-forms-item name="projectName">
            <template #label>
              <view class="cust-form-lab">
                <image class="lab-icon" src="/static/images/fillout/list-tip.png" mode=""></image>
                <text class="lab">项目名称</text>
              </view>
            </template>
            <uni-easyinput v-model="form.projectName" disabled placeholder="请输入..."></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item name="projectCode">
            <template #label>
              <view class="cust-form-lab">
                <image class="lab-icon" src="/static/images/fillout/list-tip.png" mode=""></image>
                <text class="lab">项目编码</text>
              </view>
            </template>
            <uni-easyinput v-model="form.projectCode" disabled placeholder="请输入..."></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item name="modulus">
            <template #label>
              <view class="cust-form-lab">
                <image class="lab-icon" src="/static/images/fillout/list-tip.png" mode=""></image>
                <text class="lab">模数</text>
              </view>
            </template>
            <uni-easyinput v-model="form.modulus" placeholder="请输入..."></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item name="footage">
            <template #label>
              <view class="cust-form-lab">
                <image class="lab-icon" src="/static/images/fillout/list-tip.png" mode=""></image>
                <text class="lab">进尺</text>
              </view>
            </template>
            <uni-easyinput v-model="form.footage" placeholder="请输入..."></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item name="modulusCycleTime">
            <template #label>
              <view class="cust-form-lab">
                <image class="lab-icon" src="/static/images/fillout/list-tip.png" mode=""></image>
                <text class="lab">循环时间(小时)</text>
              </view>
            </template>
            <uni-easyinput v-model="form.modulusCycleTime" type="number" placeholder="请输入..."></uni-easyinput>
          </uni-forms-item>

          <uni-forms-item name="inputPerson">
            <template #label>
              <view class="cust-form-lab">
                <image class="lab-icon" src="/static/images/fillout/list-tip.png" mode=""></image>
                <text class="lab">填报人</text>
              </view>
            </template>
            <uni-easyinput v-model="form.inputPerson" placeholder="请输入..."></uni-easyinput>
          </uni-forms-item>

          <uni-forms-item name="influenceFactor">
            <template #label>
              <view class="cust-form-lab">
                <image class="lab-icon" src="/static/images/fillout/list-tip.png" mode=""></image>
                <text class="lab">影响因素</text>
              </view>
            </template>
            <uni-easyinput v-model="form.influenceFactor" type="textarea" placeholder="请输入..."></uni-easyinput>
          </uni-forms-item>
        </view>

        <view class="view-block2">
          <uni-section title="工序详情" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
          <view class="view-block">
            <uni-row :gutter="10">
              <template v-for="(item, index) in form.excavationProcessDetailVOList">
                <uni-col :span="16">
                  <uni-forms-item name="moduleCount" :key="form.id?item.id:item.processId">
                    <template #label>
                      <view class="cust-form-lab">
                        <image class="lab-icon" src="/static/images/fillout/list-tip.png" mode=""></image>
                        <text class="lab">{{ item.processName }}</text>
                      </view>
                    </template>
                    <uni-datetime-picker v-model="form.excavationProcessDetailVOList[index].processStartTime" type="datetime" placeholder="开始时间" />
                  </uni-forms-item>
                </uni-col>
                <uni-col :span="8">
                  <uni-forms-item label="" name="moduleCount">
                    <uni-easyinput v-model="form.excavationProcessDetailVOList[index].processDuration" type="number" placeholder="工作时长"></uni-easyinput>
                  </uni-forms-item>
                </uni-col>
              </template>
            </uni-row>
          </view>
        </view>
      </uni-forms>
    </view>
    <view class="fixed-btn-box">
      <view class="cust-btn" @click="openEdit()">提交填报</view>
    </view>

    <msg-popup ref="msgPopup">
      <template #content>
        <view class="cust-msg-content">
          <view class="title">提示信息</view>
          <view class="msg">{{ popMsg }}</view>
        </view>
      </template>
    </msg-popup>
  </view>
</template>

<script>
import { required } from '@/utils/rules';
import { getActive, getProcess, addProcess, updateProcess } from '@/api/person/process'; //接口zhendelan
export default {
  options: {
    // styleIsolation: 'shared' // 解除样式隔离
  },
  data() {
    return {
      popMsg: '',
      form: {
        projectName: null,
        projectCode: null,
        excavationProcessDetailVOList: []
      },
      rules: {
        projectName: { rules: [required('请输入项目名称')] },
        projectCode: { rules: [required('请输入项目编码')] },
        modulus: { rules: [required('请输入模数')] },
        footage: { rules: [required('请输入进尺')] },
        modulusCycleTime: { rules: [required('请输入循环时间')] },
        inputPerson: { rules: [required('请输入填报人')] },
        // processDetailsArray: {rules:[required('请输入工序详情')]},
        influenceFactor: { rules: [required('请输入影响因素')] }
      },
    };
  },
  onLoad(option) {
    let title = '新增掘进';
    if (option && option.id) {
      title = '编辑掘进';
      this.getDetails(option.id);
    } else {
      this.handleDef();
    }
    // uni.setNavigationBarTitle({
    //   title
    // });
  },
  methods: {
    handleDef() {
      this.getDicts('excavation_process').then((res) => {
        if (res.code == 200) {
          res.data.forEach((item) => {
            this.form.excavationProcessDetailVOList.push({
              processId: item.dictValue,
              processName: item.dictLabel,
              processStartTime: null,
              processDuration: null
            });
          });
        }
      });
      getActive().then((res) => {
        if (res.code == 200) {
          this.form.projectName = res.data.companyName || null;
          this.form.projectCode = res.data.unitCode || null;
        }
      });
    },
    getDetails(id) {
      getProcess(id).then((response) => {
        this.form = response.data;

      });
    },
    handleDetail() {
      let nullCount = 0,
        nullLabel = null;
      for (let i = 0; i < this.form.excavationProcessDetailVOList.length; i++) {
        let item = this.form.excavationProcessDetailVOList[i];
        if (item.processStartTime) {
          if (item.processDuration == null || item.processDuration == '') {
            nullLabel = item.processName;
            break;
          }
        } else {
          nullCount++;
        }
      }
      if (nullCount == this.form.excavationProcessDetailVOList.length) {
        this.custPop('请至少填写一道工序');
        return false;
      }
      if (nullLabel) {
        this.custPop(`请填写${nullLabel}的工作时长`);
        return false;
      }

      return true;
    },
    openEdit() {
      this.$refs.form
        .validate()
        .then((res) => {
          if (!this.handleDetail()) {
            return false;
          }
          let parmas = {
            ...this.form,
            excavationProcessDetailDTOList: this.form.excavationProcessDetailVOList //后台不改
          };
          if (this.form.id) {
            this.popMsg = '修改成功';
            updateProcess(parmas).then((response) => {
              this.$refs.msgPopup.open();
              setTimeout(() => {
                this.$tab.navigateBack();
              }, 900);
            });
          } else {
            this.popMsg = '新增成功';
            addProcess(parmas).then((response) => {
              this.$refs.msgPopup.open();
              setTimeout(() => {
                this.$tab.navigateBack();
              }, 900);
            });
          }
        })
        .catch((err) => {
          console.log('表单错误信息：', err);
        });
    },
    custPop(msg) {
      this.popMsg = msg;
      this.$refs.msgPopup.open();
      setTimeout(() => {
        this.$refs.msgPopup.close();
      }, 800);
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-wrapper {
  height: 100%;
  // background: #fff;

  .wrapper-scroll {
    height: calc(100% - 114rpx);
    overflow-y: auto;
  }

  .view-block {
    background: #fff;
    padding: 30rpx;
    margin-bottom: 50rpx;
  }
}

.cust-msg-content {
  text-align: center;
  .title {
    font-size: 36rpx;
    font-weight: 500;
    color: #000000;
    line-height: 72rpx;
    padding-top: 180rpx;
  }
  .msg {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
    line-height: 64rpx;
  }
}

::v-deep .uni-section .uni-section-header {
  padding: 20rpx 30rpx;
}
::v-deep .uni-forms-item__label.no-label {
  height: 29px;
}
::v-deep .uni-section__content-title {
  font-weight: 500;
}
</style>
